<template>
  <div class="table-wrap">
    <div class="table-content">
      <div class="table-search flex flex-row">
        <div class="search-wrap">
          <div class="item-wrap">
            <div class="search-item">
              <span class="search-item-prefix">关键词</span>
              <Input placeholder="输入关键词查询" v-model:value="pageRequest.keywords" allowClear></Input>
            </div>
            <div class="search-item">
              <span class="search-item-prefix">职位类别</span>
              <TreeSelect v-model:value="pageRequest.jobTypeId" style="width: 200px" placeholder="请选择使用职位"
                :tree-data="modelOption" allowClear :fieldNames="{ children: 'children', label: 'name', value: 'id' }"
                tree-checkable>
              </TreeSelect>
            </div>
          </div>
          <div class="search-btn">
            <Button type="primary" class="!flex flex-row items-center" @click="getPageList">
              <template #icon>
                <SearchOutlined class="!flex" />
              </template>查询
            </Button>
            <Button type="default" @click="handleReset">重置</Button>
          </div>
        </div>
      </div>
      <div class="table-add-btn">
        <span>共{{ pageDatasource?.length }}场景模板</span>
        <Button type="primary" @click="handleAdd()" class="!flex flex-row items-center">
          <template #icon>
            <PlusOutlined class="!flex" />
          </template>添加模板</Button>
      </div>

      <Table :columns="pageColumns" :data-source="pageDatasource" :pagination="false" row-key="id" :loading="loading"
        @change="onChange">
        <template #bodyCell="{ column, record }">

          <template v-if="column.key === 'name'">
            <div @click="handleDetail(record)" class="text-[#0960bd] cursor-pointer"> {{ record.name || '--' }} </div>
          </template>

          <template v-if="column.key === 'jobTypeIds'">
            <TreeSelect v-if="record.jobTypeIds && record.jobTypeIds.length" v-model:value="record.jobTypeIds"
              style="width: 100%" :bordered="false" :disabled="true" :tree-data="modelOption" multiple
              :fieldNames="{ children: 'children', label: 'name', value: 'id' }" class="list-position">
            </TreeSelect>
            <span v-else>--</span>
          </template>

          <template v-if="column.key === 'action'">
            <Button class="!px-0 !mr-6" type="link" @click="handleAdd(record, true)">复制</Button>
            <Button class="!px-0 !mr-6" type="link" @click="handleAdd(record)">编辑</Button>
            <Button class="!px-0 !mr-6" type="link" @click="handleDel(record.id)" danger>删除</Button>
          </template>

        </template>
      </Table>
    </div>
    <Addmodal ref="addRef" @ok="getPageList" :position="modelOption" />
    <DetailDrawer ref="detailRef" @ok="handleOkDetail" />
  </div>
</template>

<script lang="ts" setup name="AccountIndex">
import { ref } from 'vue'
import { pageColumns } from './index'
import { Button, Table, message, Input, Modal, TreeSelect } from 'ant-design-vue'
import Addmodal from './AddModal.vue';
import DetailDrawer from './DetailDrawer.vue'
import { KnowledgeTemplateApi, KnowledgeTemplateResult, HomeApi, JobType } from '@/api'
import { buildTree } from '@/utils/queryConversion'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'

const loading = ref(false)
const modelOption = ref<JobType[]>()
const pageDatasource = ref<KnowledgeTemplateResult[]>()
const pageRequest = reactive<{ keywords?: string, jobTypeId?: number }>({
  keywords: ''
});
// 添加账号
const addRef = ref();
// 详情
const detailRef = ref();

// 获取页面数据
const getPageList = async () => {
  loading.value = true;
  try {
    let res = await KnowledgeTemplateApi.knowledgetemplateList(
      pageRequest.keywords,
      pageRequest.jobTypeId,
    );
    pageDatasource.value = res;
  } catch (error) { } finally {
    loading.value = false;
  }
}

// 获取所有职位
const getAllModelOption = async () => {
  let res = await HomeApi.getalljobtypes();
  modelOption.value = buildTree(res)
}

function onChange(_: any, __: any, sorter: any) {
  console.log(sorter);
  // pageRequest.sort!.field = sorter.order ? sorter.field : '';
  // pageRequest.sort!.reverse = sorter.order == 'descend';
  // getPageList();
}

onMounted(() => {
  getPageList();
  getAllModelOption();

})

// 重置
function handleReset() {
  pageRequest.jobTypeId = undefined;
  pageRequest.keywords = '';

}

// 删除
const handleDel = async (id: string) => {
  Modal.confirm({
    title: '确认删除该模板吗?',
    icon: h(ExclamationCircleOutlined, { style: 'color:red;' }),
    async onOk() {
      loading.value = true;
      try {
        await KnowledgeTemplateApi.knowledgetemplateDelete(id)
        message.success('删除成功')
        getPageList()
      } catch (error) { } finally {
        loading.value = false;
      }
    },
  });
}

// 添加账号
function handleAdd(data?: KnowledgeTemplateResult, isCopy?: boolean) {
  addRef.value.handleOpen(data, isCopy);
}

const editId = ref();
// 详情
function handleDetail(data: KnowledgeTemplateResult) {
  editId.value = data.id;
  detailRef.value.handleOpen(data, modelOption.value);
}

async function handleOkDetail() {
  await getPageList();
  let data = pageDatasource.value?.find(v => v.id == editId.value);
  detailRef.value.handleOpen(data, modelOption.value);
}

</script>

<style lang="less">
.list-position {
  .ant-select-selector {
    cursor: auto;
    padding: 0;

    .ant-select-selection-item {
      background: #fff;
      color: #333 !important;
      border: none;
      padding: 0;
      margin: 0 4px 0 0;
      line-height: 16px;
      height: 16px;

      .ant-select-selection-item-content {
        line-height: 16px;
        height: 16px;
      }
    }
  }
}
</style>